<script setup>
import ElCardBg from '@/components/ElCardBg.vue'
import { ref, onMounted, nextTick } from 'vue'
import { getMssageList, getUserByName, getMessage, getMessageByUser, delMessage, delUser } from '@/api/message'
import { ElMessage, ElMessageBox } from 'element-plus';
// const userName = ref('')
// 表格数据
const mssageList = ref([])
// 用户数据
const nameList = ref([])
const getMssageUserList = async () => {
  const res = await getMssageList()
  activeIndex.value = 0
  console.log(res);
  mssageList.value = res.data.messageList
  nameList.value = res.data.userList
}
onMounted(() => {
  getMssageUserList()
})
// 查询条件参数
const params = ref({
  name: '',
  content: ''
})
// 查询用户名下的留言
const searchUser = async () => {
  if (!params.value.name.trim('')) {
    activeIndex.value = 0
    getMssageUserList()
  }
  const res = await getUserByName(params.value.name)
  mssageList.value = res.data.data
}
// 默认激活状态
const activeIndex = ref(0)
// 存储当前激活用户名
const activeName = ref('')
// 根据留言名查询
const searchMessage = async () => {
  // 判断是否输入了值
  if (!params.value.content.trim('')) {
    activeIndex.value = 0
    getMssageUserList()
    return
  }
  // 判断是不是全部的状态
  if (activeIndex.value === 0) {
    // 查询
    const res = await getMessage(params.value.content, null)
    mssageList.value = res.data
    return
  }
  // 判断是否有用户名
  if (activeName.value) {
    // 查询
    const res = await getMessage(params.value.content, activeName.value)
    mssageList.value = res.data
    return
  }
  // 查询
  const res = await getMessage(params.value.content, null)
  mssageList.value = res.data
}
// 重置
const reset = () => {
  params.value.content = ''
  activeIndex.value = 0
  getMssageUserList()
}

// 点击了用户名查询
const onNameSearch = async (name, index) => {
  params.value.content = ''
  params.value.name = ''
  activeIndex.value = index + 1
  activeName.value = name
  const res = await getMessageByUser(name)
  mssageList.value = res.data
}
// 点击了全部
const all = () => {
  params.value.content = ''
  activeIndex.value = 0
  getMssageUserList()
}
// 删除
const del = async (row) => {
  await delMessage(row.id, {
    name: row.name,
    content: row.content
  })
  ElMessage.success("删除成功")
  onNameSearch(row.name, activeIndex.value - 1)
}
// 滚动条
const scroll = ref(null)
// 删除用户
const onDelUser = async (item) => {
  ElMessageBox.confirm(
    '您确定要删除该用户吗?',
    '删除用户',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await delUser(item)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      // 重新调用获取到用户信息
      getMssageUserList()
      // 等页面刷新就将滚动条滚动到0
      nextTick(() => { // 确保DOM更新后再执行滚动操作
        scroll.value.scrollTo(0, 0);
      });
    })
}
</script>
<template>
  <ElCardBg title="留言管理">
    <template v-slot:content>
      <div class="container">
        <!-- 左边所有用户 -->
        <div class="left">
          <el-input placeholder="请输入用户名称" @blur="searchUser" v-model="params.name"
            style="width: 200px;margin-bottom: 35px;"></el-input>
          <el-scrollbar height="480px" ref="scroll">
            <div class="text-box" :class="{ active: activeIndex === 0 }" @click="all">
              <p class="text">全部</p>
              <i class="iconfont icon-geren1"></i>
            </div>
            <div class="text-box" :class="{ active: activeIndex === index + 1 }" v-for="(item, index) in nameList"
              :key="item" @click="onNameSearch(item, index)">
              <p class="text">{{ item }}</p>
              <i class="iconfont icon-shanchu" @click="onDelUser(item)"></i>
            </div>
          </el-scrollbar>
        </div>
        <!-- 右边表的信息 -->
        <div class="right">
          <!-- 搜索区域 -->
          <el-row>
            <div class="left-btn">
              <div class="box1">
                <el-form-item label="留言信息：" label-width="161px">
                  <el-input placeholder="请输入留言信息" v-model="params.content" style="width:240px"></el-input>
                </el-form-item>
              </div>
              <div class="box2">
                <el-button type="primary" style="width: 80px;margin-left: 12px;" @click="searchMessage">
                  <i class="iconfont icon-sousuo1" style="margin-right: 6px;font-size: 18px;"></i>
                  <span style="margin-right: 30px;">搜索</span>
                </el-button>
                <el-button type="info" style="width: 80px;" @click="reset">
                  <i class="iconfont icon-zhongzhi" style="font-size: 14px;"></i>
                  <span style="margin-right: 30px;">重置</span>
                </el-button>
              </div>
            </div>
          </el-row>
          <!-- 表格区域 -->
          <el-row style="margin-top: 8px;">
            <el-table :data="mssageList" height="480" :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ textAlign: 'center' }">
              <el-table-column label="序号" prop="id" width="60"></el-table-column>
              <el-table-column label="名称" prop="name" width="180"></el-table-column>
              <el-table-column label="头像" prop="userUrl" width="130">
                <template #default="scope">
                  <div class="img-box">
                    <img :src="scope.row.userUrl" alt="">
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="留言内容" prop="content" width="200">
                <template #default="scope">
                  <el-text type="primary">{{ scope.row.content }}</el-text>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
              <el-table-column label="修改时间" prop="updateTime" width="180"></el-table-column>
              <el-table-column label="操作" width="80">
                <template #default="scope">
                  <el-popconfirm title="您确定要删除该留言吗?" width="230" @confirm="del(scope.row)">
                    <template #reference>
                      <el-link type="warning" v-permissionDirective>删除</el-link>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
      </div>
    </template>
  </ElCardBg>
</template>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 560px;
  padding: 0;

  .left {
    width: 250px;
    margin-right: 10px;
    border-right: 1px solid #e9edf1;

    .active {
      background-color: #47a1fc !important;
      color: #fdfeff !important;
    }

    .text-box {
      position: relative;
      display: flex;
      height: 40px;
      width: 200px;
      background-color: #f5f7fa;
      color: #79bbff;
      margin-bottom: 8px;
      border-radius: 10px;
      text-align: center;
      align-items: center;
      justify-content: center;

      .text {
        line-height: 40px;
        margin-right: 20px;
      }

      i {
        position: absolute;
        /* 将图标设置为绝对定位 */
        right: 10px;
        /* 设置图标距离盒子右侧的距离，按需调整 */
        top: 50%;
        /* 将图标垂直居中对齐，这里的50%是基于.text-box的高度 */
        transform: translateY(-50%);
        /* 使用transform调整图标向上移动自身高度的一半，实现垂直居中 */
      }

      i:hover {
        color: red;
      }
    }

    .text-box:hover {
      cursor: pointer;
      background-color: #47a1fc;
      color: #fdfeff;
    }
  }

  .right {
    width: 1040px;
    margin-left: 3px;

    .left-btn {
      margin-left: 400px;
      display: flex;
      justify-content: end;
    }

    .img-box {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      margin-left: 28px;

      img {
        border-radius: 50%;
        width: 45px;
        height: 45px;
        object-fit: cover;
      }
    }
  }
}
</style>